<template>
	<page-container position="bottom" :show="value" round @afterleave="afterleave" :custom-style="CustomStyle">
		<view class="popup">
			<view class="popup-head">
				<text class="title">
					{{title}}
				</text>
				<view class="close">
					<u-icon name="close" color="#98A5B3" size="28" @click="onClose"></u-icon>
				</view>

			</view>
			<view class="popup-body">
				<slot></slot>
			</view>
			<view class="popup-bottom safe-area-inset-bottom">
				<slot name="bottom">

				</slot>
			</view>
		</view>
	</page-container>
</template>

<script>
	import BetweenButtonGroup from '@/components/buttonGroup/optionButtonGroup.vue'
	export default {

		components: {
			BetweenButtonGroup
		},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			height: {
				type: String,
				default: '85%'
			},
			title: {
				type: String,
				default: '标题'
			},
			position: {
				type: String,
				default: 'bottom'
			}
		},

		computed: {
			CustomStyle() {

				return `height:${this.height} `
			}
		},

		methods: {
			close() {
				this.$emit('input', false)
			},
			onClose() {
				this.close()
			},
			afterleave() {
				this.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 100%;
		height: 100%;
		min-height: 300rpx;
		display: flex;
		flex-direction: column;

		&-head {
			padding: 30rpx 30rpx 0 30rpx;
			flex: 0 0 0 auto;
			display: flex;

			>.title {
				flex: 1;
				font-weight: 600;
				font-size: 32rpx;
				color: #0F2E4D;
			}

			>.close {
				flex: 1;
				text-align: right;
			}
		}

		&-body {
			flex: 1;
			padding: 0rpx 30rpx;
		}

		&-bottom {
			flex: 0 0 0 auto;
		}
	}
</style>
